<template>
 <div class="wrap">
   <div class="source">
     <button :class="[ 'gw-button', val.className]"
             v-for="(val, key) in type"
             :key="key" :style="{'background':val.bgd}">{{val.title}}
     </button>
   </div>

      <!--<slot name = "but" class="gw-button"  :style="$attrs"></slot>-->
 </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      type: [
        {title:"默认按钮",bgd:"#fff",className:"tacitly"},
        {title:"主要按钮",bgd:"#409eff",className:"main"},
        {title:"成功按钮",bgd:"#85ce61",className:"succed"},
        {title:"信息按钮",bgd:"#909399",className:"sessage"},
        {title:"警告按钮",bgd:"#e6a23c",className:"warning"},
        {title:"危险按钮",bgd:"#f56c6c",className:"danger"},
      ]}
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wrap{
  width: 480px;
  height: 340px;
  border: solid 1px #909399;
  margin: auto;
  transform: translate3d(0,50%,0);
}
.source{
  padding: 24px;
}
.source .tacitly{
  color: #606266;
}
  .gw-button{
    width: 98px;
    height: 40px;
    border-radius: 3px;
    background: aliceblue;
    outline: none;
    border: none;
    margin-left: 20px;
    margin-top: 20px;
    color: #fff;
  }
  .tacitly{
    border: solid 1px #909399;
  }
.tacitly:hover{
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}
  .main:hover{
    background: #66b1ff;
    border-color: #66b1ff;
    color: #fff;
  }
  .succed:hover{
    background: #85ce61;
    border-color: #85ce61;
    color: #fff;
  }
  .sessage:hover{
    background: #a6a9ad;
    border-color: #a6a9ad;
    color: #fff;
  }
  .warning:hover{
    background: #ebb563;
    border-color: #ebb563;
    color: #fff;
  }
.warning:active{
  ackground: #cf9236;
  border-color: #cf9236;
  color: #fff;
}
  .danger:hover{
    background: #f78989;
    border-color: #f78989;
    color: #fff;
  }
.danger:active{
  background: #dd6161;
  border-color: #dd6161;
  color: #fff;
}
</style>
